<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<%@ include file="../common/header.jsp" %>

<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=${AK}"></script>
<script type="text/javascript" src="/static/js/rmodal.js"></script>
<link rel="stylesheet" href="/static/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/static/css/animate.min.css"/>
<style>
    <%--百度地图取消显示logo--%>
    .BMap_cpyCtrl {
        display: none;
    }

    .anchorBL {
        display: none;
    }

    <%--信息样式--%>
    .kv-item label {
        width: 110px
    }

    .kv-item-content {
        line-height: 30px;
        border-bottom: 1px solid rgba(128, 128, 128, 0.6);
        max-width: calc(90%)
    }

    .buttons .layui-btn {
        margin-bottom: 25px
    }

    .subfiled h2 {
        cursor: pointer
    }
</style>

<div id="saper-container">
    <div id="saper-bd">
        <div class="subfiled clearfix">
            <h2>${titleName}</h2>
        </div>
        <div class="subfiled-content">
            <div class="saper-form">
                <div class="kv-item clearfix">
                    <label>任务编号：</label>
                    <div class="kv-item-content">${reportFormat.ctReport.taskId}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>事件名：</label>
                    <div class="kv-item-content">${reportFormat.ctReport.title}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>事件分类：</label>
                    <div class="kv-item-content">
                        ${reportFormat.typeBigName}
                        <c:if test="${reportFormat.typeSmallName != null}">
                            &nbsp;&nbsp;${reportFormat.typeSmallName}
                        </c:if>
                    </div>
                </div>
                <div class="kv-item clearfix">
                    <label>事件描述：</label>
                    <div class="kv-item-content">
                        ${reportFormat.ctReport.content}
                    </div>
                </div>
                <div class="kv-item clearfix">
                    <label>事件地点：</label>
                    <div class="kv-item-content">${reportFormat.ctReport.province}&nbsp;${reportFormat.ctReport.city}&nbsp;${reportFormat.ctReport.county}
                        &nbsp;${reportFormat.townName}&nbsp;${reportFormat.villageName}&nbsp;${reportFormat.ctReport.address}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>gis信息：</label>
                    <div class="kv-item-content" style="border: none">
                        <div id="mapContainer" gis-lng="${reportFormat.ctReport.lng}"
                             gis-lat="${reportFormat.ctReport.lat}"
                             style="width: 600px;height: 400px;margin-top: 10px;"></div>
                        <div id="searchResultPanel"
                             style="border:1px solid #C0C0C0;width:150px;height:auto; display:none;"></div>
                    </div>
                </div>
                <div class="kv-item clearfix">
                    <label>上报类别：</label>
                    <div class="kv-item-content">${reportFormat.categoryName}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>上报人：</label>
                    <div class="kv-item-content">${reportFormat.reportName}</div>
                </div>
                <%--<div class="kv-item clearfix">--%>
                    <%--<label>上报人电话：</label>--%>
                    <%--<div class="kv-item-content">${reportFormat.reportTel}</div>--%>
                <%--</div>--%>
                <div class="kv-item clearfix">
                    <label>上报时间：</label>
                    <div class="kv-item-content">${reportFormat.createTimeName}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>更新时间：</label>
                    <div class="kv-item-content">${reportFormat.ctReport.updateTime}</div>
                </div>
                <div class="kv-item clearfix">
                    <label>当前状态：</label>
                    <div class="kv-item-content">${reportFormat.scheduleName}</div>
                </div>

                <div class="kv-item clearfix">
                    <label>上报文件：</label>

                    <div class="kv-item-content" id="fileList">





                    </div>
                </div>
                <c:if test="${reportFormat.ctReport.schedule >=1 }">
                    <div class="kv-item clearfix">
                        <label>受理员：</label>
                        <div class="kv-item-content">
                                ${reportFormat.handleManName}
                        </div>
                        <label>受理时间：</label>
                        <div class="kv-item-content">
                                ${taskTime.agreeTime}
                        </div>
                    </div>
                </c:if>
                <c:choose>
                    <c:when test="${reportFormat.ctReport.schedule == -1}">
                        <div class="buttons">
                            没有能够执行的操作哦！
                        </div>
                    </c:when>
                    <c:when test="${reportFormat.ctReport.schedule == 0}">
                        <div class="buttons">
                            <button city-event="report-accept" id="acceptReport" event-id="${reportFormat.ctReport.id}"
                                    class="layui-btn layui-btn-sm">内容属实
                            </button>
                            <button city-event="report-false" event-id="${reportFormat.ctReport.id}"
                                    class="layui-btn layui-btn-sm layui-btn-danger">虚假上报
                            </button>
                        </div>
                    </c:when>
                    <c:when test="${reportFormat.ctReport.schedule == 1}">
                        <div class="buttons">
                            <button city-event="report-self-do" event-id="${reportFormat.ctReport.id}"
                                    class="layui-btn layui-btn-sm">自行处置案件
                            </button>
                            <button city-event="report-dispatch" id="showModal"  event-id="${reportFormat.ctReport.id}"
                                    class="layui-btn layui-btn-sm layui-btn-danger">派遣专业部门
                            </button>
                        </div>
                        <c:choose>
                            <c:when test="${taskTime.casebackComment != null}">

                                <div class="kv-item clearfix">
                                    <label>撤回原因：</label>
                                    <div class="kv-item-content">
                                            ${taskTime.casebackComment}
                                    </div>
                                </div>

                            </c:when>
                        </c:choose>
                    </c:when>
                    <c:when test="${reportFormat.ctReport.schedule == 2}">
                        <div class="buttons">正在由<span class="color-yellow">${reportFormat.branchName}</span>处置</div>
                    </c:when>
                    <c:otherwise>
                        <div class="buttons">
                            目前没有该选项！
                        </div>
                    </c:otherwise>
                </c:choose>
            </div>


        </div>
    </div>


    <!--模态窗口-->
    <div id="modal" class="modal">
        <div class="modal-dialog animated">
            <div class="modal-content">
                <form class="form-horizontal" method="get">
                    <div class="modal-header">
                        <strong>请选择部门</strong>
                    </div>

                    <div class="modal-body">
                        <div class="form-group">
                            <ul id="demo" ></ul>
                        </div>
                    </div>

                    <div class="modal-footer">
                        <button class="layui-btn layui-btn-radius layui-btn-danger layui-btn-sm" type="button" onclick="modal.close();">取消</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="mengceng">
        <div class="show-bigImg">
            <img src="" alt="" id="bigImg" onclick="closeImg(this)">
        </div>
    </div>



    <div id="saper-ft">
        <button></button>
    </div>
</div>


<%@ include file="../common/footer.jsp" %>


<script type="text/javascript">
    window.onload = function() {
        var modal = new RModal(document.getElementById('modal'), {
            beforeOpen: function(next) {
                console.log('beforeOpen');
                next();
            }
            , afterOpen: function() {
                console.log('opened');
            }

            , beforeClose: function(next) {
                console.log('beforeClose');
                next();
            }
            , afterClose: function() {
                console.log('closed');
                $("#demo").html("");
            }


        });

        document.addEventListener('keydown', function(ev) {
            modal.keydown(ev);
        }, false);

        document.getElementById('showModal').addEventListener("click", function(ev) {


            var layer = layui.layer;
            var report_id = $("#showModal").attr("event-id");
            $.post("/ajax/colligate/getBranch",{},function(res){
                if(res.code === 1){

                    var list = res.branchList;

                    function toTree(data) {
                        // 删除 所有 children,以防止多次调用
                        data.forEach(function (item) {
                            delete item.children;
                        });

                        // 将数据存储为 以 id 为 KEY 的 map 索引数据列
                        var map = {};
                        data.forEach(function (item) {
                            map[item.id] = item;
                        });
//        console.log(map);
                        var val = [];
                        data.forEach(function (item) {
                            // 以当前遍历项，的pid,去map对象中找到索引的id
                            var parent = map[item.parent];
                            // 好绕啊，如果找到索引，那么说明此项不在顶级当中,那么需要把此项添加到，他对应的父级中
                            if (parent) {
                                (parent.children || ( parent.children = [] )).push(item);
                            } else {
                                //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中，作为顶级
                                val.push(item);
                            }
                        });
                        return val;
                    }
                    console.log(toTree(list));
                    var treeList = [];
                    treeList = toTree(list);



                    layui.use('atree', function() {
                        var tree = layui.atree({
                            elem: '#demo' //指定元素
                            ,
                            // check: 'checkbox' //勾选风格
                            // ,
                            skin: 'as' //设定皮肤
                            //,target: '_blank' //是否新选项卡打开（比如节点返回href才有效）
                            ,
//              drag: true,
                            spreadAll:false,
                            props:{
                                addBtnLabel:'&nbsp;&nbsp;',
                                deleteBtnLabel:'&nbsp;&nbsp;',
                                name: 'name',
                                id: 'id',
                                children:'children',
                                checkbox:'checkbox',
                                spread:'spread'
                            },
                            change:function(val){

                                console.group('change event')
                                console.log('Array')
                                // alert(val[0].id+"========="+val[0].name);
                                console.log(val);
                                console.groupEnd()



                            },
                            click: function(item) { //点击节点回调
                                console.group('click event')
                                console.log(report_id)

                                console.log(item);
                                console.groupEnd()

                                if(confirm("您确认要派遣给"+item.name+"吗？")){

                                    var branch_id = item.id;
                                    $.post("/ajax/colligate/dispatchBranch",{
                                        reportId:report_id,
                                        branchId:branch_id
                                    },function(res) {
                                        if (res.code === 1) {
                                            alert("派遣成功！");
                                            refresh()
                                        }
                                    });


                                }


                            },
                            nodes: treeList


                        });

                    });
                }else
                    layer.msg("读取专业部门数据失败！");
            });







            ev.preventDefault();
            modal.open();
        }, false);

        window.modal = modal;
    }
</script>
<script type="application/javascript">

    /*同意上报*/
    $("#acceptReport").click(function () {
        var report_id = $("#acceptReport").attr("event-id");
        console.log(report_id);

        layer.open({
            type: 1,
            // title: "选择截止时间",
            area: ['300px'],
            closeBtn: 1,
            shadeClose: true,
            content: '    <div class="layui-card">\n' +
            '        <div class="layui-card-header">\n' +
            '            选择截止时间\n' +
            '        </div>\n' +
            '        <div class="layui-card-body">\n' +
            '            <div class="layui-form-item">\n' +
            '                <div class="layui-input-inline" style="width: 260px;">\n' +
            '                    <input type="text" id="endTime" name="id" placeholder="点击选择时间" lay-verify="required"\n' +
            '                           autocomplete="off" class="layui-input">\n' +
            '                </div>\n' +
            '\n' +
            '            </div>\n' +
            '\n' +
            '\n' +
            '                <div class="layui-form-item" >\n' +
            '                    <div class="layui-input-block">\n' +
            '                        <button  class="layui-btn" lay-submit lay-filter="save" id="save">提交</button>\n' +
            '                    </div>\n' +
            '\n' +
            '                </div>\n' +
            '        </div>\n' +
            '    </div>',
            fixed:false,
            offset: '100px',
        });

        layui.use('laydate', function(){
            var laydate = layui.laydate;

            //执行一个laydate实例
            laydate.render({
                elem: '#endTime'
                ,type: 'datetime'//指定元素
            });

        });


        $("#save").click(function () {
            var endTime = $("#endTime").val();

            $.post("/ajax/colligate/reportScheduleChange",{
                id:report_id,
                schedule:1,
                endTime:endTime
            },function(res){
                console.log(res.code);
                layer.msg(res.code === 1 ? "操作成功！" : "操作失败！",{},function(){
                    refresh();
                });
            });
        })
    })



</script>

<script type="text/javascript">

    //创建地图
    var map = new BMap.Map("mapContainer", {
        minZoom: 11
    });

    // 创建地图实例
    var lng = $("#mapContainer").attr("gis-lng");
    var lat = $("#mapContainer").attr("gis-lat");
    var point = new BMap.Point(lng, lat);   // 创建点坐标
    map.centerAndZoom(point, 18);                       // 设置缩放度
    map.clearOverlays();                                // 清除地图上所有覆盖物
    map.addOverlay(new BMap.Marker(point));             // 添加标注
    map.enableScrollWheelZoom();                    //启用滚轮放大缩小

    var taskId =${taskId};

    $.post("/ajax/colligate/fileList",{
        taskId:taskId
    },function (res) {
        if(res.code==0){
            for(var i=0; i<res.data.length;i++){
                var upFileName = res.data[i].filePath;
                var index1=upFileName.lastIndexOf(".");
                var index2=upFileName.length;
                var suffix=upFileName.substring(index1+1,index2);//后缀名
                //通过后缀名 判断文件  如果后缀名是jpg , png ,添加im标签  如果其他的 添加对应的标签
                if(suffix=="png" || suffix=="jpg"){
                    $("#fileList").append('<div><img style="width: 80px;height: 60px;" onClick="bigImg(this)" src="'+ upFileName +'" /></div>');
                }else if(suffix=="gif" || suffix=="mp4"){
                    $("#fileList").append(' <div>\n' +
                        '                            <video width="320" height="240" controls loop>\n' +
                        '                                <source src="'+ upFileName +'" type="video/mp4">\n' +
                        '                            </video>\n' +
                        '                        </div>');

                }else if(suffix=="pdf" || suffix=="doc" || suffix=="docx"){
                    $("#fileList").append('    <div>\n' +
                        '                            <a href="'+ upFileName +'">\n' +
                        '                                <button class="layui-btn  layui-btn-warm">下载上报文档 \n' +
                        '\n' +
                        '                                </button>\n' +
                        '                            </a>\n' +
                        '                        </div>')
                }


            }
        }
    })


</script>


<style>
    .show-bigImg{
        width: 1200/@rem;
        height: auto;
        margin: auto;
        position: fixed;
        top: 50%;
        left: 50%;
    }
    .show-bigImg img{
        max-width: 100%;
        max-height: 800/@rem;
    }
    .mengceng{
        position:fixed;
        left:0;
        top:0;
        width:100%;
        height:100%;
        background-color: rgba(0,0,0,0.7);
        display: none;
    }
</style>
<script>
    function bigImg(obj) {
        var image = new Image(); //创建一个image对象
        var path = obj.src;
        image.src=path;   //新创建的image添加src
        var width = image.width;  // 获取原始图片的宽
        var hight = image.height; // 获取原始图片高
        $("#bigImg").attr('src',path);
        $(".show-bigImg").css({"margin-top":-hight/2,"margin-left":-width/2});// 居中；css中使用了fixed定位top：50%；left：50%；
        $(".mengceng").css("display","block");
        // if (width>1200) {
        //     $(".show-bigImg").css({"margin-left":-1200/2});
        // }
        // if (hight>800) {
        //     $(".show-bigImg").css({"margin-top":-800/2});
        // }
    }
    // 点击放大图片关闭
    function closeImg(obj) {
        $("#bigImg").attr('src',"");
        $(".mengceng").css("display","none");
    }
</script>

<script type="text/javascript" src="/static/webjars/layui/layui.js"></script>

<script type="text/javascript" src="/static/webjars/leis/js/leis.open.js"></script>
<%--<script type="text/javascript" src="/static/webjars/leis/js/leis.js"></script>--%>
<script type="text/javascript" src="/static/webjars/leis/js/leis.light.js"></script>
</html>